<template>
  <el-dialog
    :visible.sync="currentShowFlag"
    append-to-body
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @closed="handleDialogClosed"
  >
    <div slot="title">
      Upload Tool
    </div>
    <div class="simple-upload-con">
      <el-upload
        ref="simple-upload"
        :disabled="isUploading"
        drag
        :action="uploadAction"
        :headers="{Authorization: `Bearer ${appToken}`}"
        :data="params"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        class="simple-upload"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          Drag the file here, or <em>click upload</em>
        </div>
      </el-upload>
      <!-- 在上传中 鼠标放在进度条上会显示对号，因此用个overlay覆盖。 -->
      <div
        v-if="isUploading"
        class="overlay"
      />
    </div>
    <div slot="footer">
      <el-button
        @click="currentShowFlag = false"
      >
        {{ $t('operation.cancel') }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import baseUrl from '@/config/base-url'
export default {
  name: 'SimpleUpload',
  props: {
    url: { type: String, required: true },
    params: Object,
    reg: { type: Boolean, default: false },
    showFlag: { type: Boolean, default: false }

  },
  data () {
    return {
      isUploading: false,
      loadingFlag: null
    }
  },
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },
    appToken () {
      return localStorage.appToken
    },
    uploadAction () {
      return `${baseUrl}${this.url}`
    }
  },
  methods: {
    setBusy (boolean) {
      this.isUploading = boolean
      if (boolean) {
        this.loadingFlag = this.$loading({ target: this.$el.querySelector('.simple-upload .el-upload') })
      } else {
        this.loadingFlag && this.loadingFlag.close()
      }
    },
    beforeUpload (file) {
      const maximum = 200
      const size = file.size / 1024 / 1024 // MB
      if (size > maximum) {
        return this.$message({ type: 'error', message: `Maximun file storage is ${maximum}M` }) && false
      }

      var str = file.name.toLowerCase()
      var reg1 = /[^\\.](\.xls)$/i
      var reg2 = /[^\\.](\.xlsx)$/i
      var reg3 = /[^\\.](\.xlsm)$/i
      var reg4 = /[^\\.](\.xml)$/i
      if (this.reg) {
        if (reg4.test(str)) {
          this.setBusy(true)
        } else {
          this.$alert('File type error', 'Error')
          return false
        }
      } else {
        if (reg1.test(str) || reg2.test(str) || reg3.test(str)) {
          this.setBusy(true)
        } else {
          this.$alert('File type error', 'Error')
          return false
        }
      }
    },
    handleSuccess (response, file, fileList) {
      this.currentShowFlag = false
      if (response.code === 500) {
        this.$emit('on-error', response, file, fileList)
        this.$alert(response.message, 'Error', { dangerouslyUseHTMLString: true })
      } else {
        this.$emit('on-success', response, file, fileList)
        this.$alert('Please go to Task Module to check the status of uploading.', 'System Message')
      }
    },
    handleError (Err, file, fileList) {
      this.currentShowFlag = false
      this.$alert('Upload Error', 'Error')
    },
    handleDialogClosed () {
      this.setBusy(false)
      this.$refs['simple-upload'].abort()
      this.$refs['simple-upload'].clearFiles()
    }
  }
}
</script>
<style lang="less" scoped>
.simple-upload-con{
  position: relative;
  /deep/.simple-upload {
    .el-upload,
    .el-upload-dragger {
      width: 100%;
    }
  }
  .overlay{
    width: 100%;
    height: 36px;
    // background: deepskyblue;
    // opacity: 0.6;
    position: absolute;
    bottom: -10px;
  }
}
</style>
